<template>
  <div class="layout-all" style="width: 30%;">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="对应模块:" prop="module_type_id">
        <el-select v-model="form.module_type_id" placeholder="请选择对应模块">
          <el-option
            v-for="item in model_arr"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="class名称:" prop="class_name">
        <el-input v-model="form.class_name" placeholder="请输入class名称" />
      </el-form-item>
      <el-form-item label="class内容:" prop="content">
        <el-input
          type="textarea"
          :rows="10"
          v-model="form.content"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="预览图:" prop="preview_picture">
        <el-upload
          class="avatar-uploader"
          list-type="picture-card"
          :action="upload_thumburl"
          :show-file-list="false"
          :before-upload="$beforeAvatarUpload"
          :on-success="handleAvatarSuccess_thumb"
        >
          <img v-if="thumb" :src="thumb" class="avatar" />
          <i v-else class="el-icon-plus" />
        </el-upload>
      </el-form-item>
      <el-form-item label="样式属性:" prop="">
        <el-button type="primary" @click="add_columnName()">添加属性</el-button>
      </el-form-item>
      <el-form-item v-if="attribute !== []" label="" prop="">
        <div v-for="(val, index) in attribute" :key="index" class="spces_div">
          <div style="margin-bottom: 10px;">
            <el-input
              v-model="val.title"
              style="width: 100%; margin-bottom: 10px;"
              placeholder="样式描述 "
            />
            <el-input
              v-model="val.attr_title"
              style="width: 49%; margin-bottom: 10px;"
              placeholder="样式属性"
            />
            <el-input
              v-model="val.attr_value"
              style="
                width: 49%;
                position: relative;
                left: 4px;
                margin-bottom: 10px;
              "
              placeholder="样式值"
            />
            <el-upload
              class="avatar-uploader"
              list-type="picture-card"
              :action="upload_thumburl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess_picture"
            >
              <img
                @click="getPicture(index)"
                v-if="picture[index].preview_picture"
                :src="picture[index].preview_picture"
                class="avatar"
              />
              <el-button
                v-else
                slot="trigger"
                @click="getPicture(index)"
                size="small"
                type="primary"
                >选取文件</el-button
              >
              <!-- <i v-else class="el-icon-plus" /> -->
            </el-upload>
            <!-- <el-input v-model="val.sort" style="width:25%" placeholder="排序" /> -->
            <el-button
              style="margin-left: 5px;"
              type="text"
              @click="del_columnName(index)"
              >删除属性</el-button
            >
          </div>
        </div>
        <!-- </div> -->
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-close" circle @click="bk()" />
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="onSubmit('form')"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      is_show: false,
      id: 0,
      model_arr: [],
      attribute: [],
      picture: [],
      index: 0,
      thumb: "",
      upload_thumburl: "",
      form: {},
      rules: {
        class_name: [
          { required: true, message: "请输入class名称", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入class内容", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }
    this.init_into();
    this.upload_thumburl = process.env.VUE_APP_BASE_API + "/pub/Upload/upload";
  },
  methods: {
    getPicture(index) {
      this.index = index;
    },
    // 添加类型
    add_columnName() {
      var length = 1;
      var id = 1;
      if (this.attribute.length > 0) {
        length = this.attribute.length - 1;
        id = this.attribute[length].id + 1;
      }
      this.attribute.push({
        id: id,
        module_id: this.id,
        title: "",
        attr_title: "",
        attr_value: "",
        preview_picture: "",
      });
      this.picture.push({
        preview_picture: "",
      });
    },
    // 删除规格
    del_columnName(index) {
      this.attribute.splice(index, 1);
      this.picture.splice(index, 1);
    },
    handleAvatarSuccess_picture(res, file) {
      this.picture[this.index].preview_picture = file.response.data.path;
      this.attribute[this.index].preview_picture =
        file.response.data.relative_path;
    },
    handleAvatarSuccess_thumb(res, file) {
      console.log(file.response.data.relative_path);
      this.thumb = file.response.data.path;
      this.form.preview_picture = file.response.data.relative_path;
    },
    // 提交
    onSubmit(formName) {
      const form = this.form;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          form.attribute = this.attribute;
          console.log(form);
          this.get("/admin/Module/save", form, "POST").then((e) => {});
          this.$router.back();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    // 返回
    bk() {
      this.$router.back();
    },
    // 获取当前数据
    init_into() {
      this.get("/admin/Module/info?id=" + this.id, "POST").then((e) => {
        this.form = e.info.tpl;
        this.model_arr = e.module_type;
        if (this.form.attribute) {
          this.attribute = this.form.attribute;
          for (var i = 0; i < this.form.attribute.length; i++) {
            this.picture.push({
              preview_picture: this.form.attribute[i].preview_picture,
            });
          }
        } else {
          this.form.attribute = [];
        }
        console.log(this.form);
      });
    },
  },
};
</script>

<style>
.layout-all {
  margin: 10px;
}
.spces_div {
  border: 1px solid #dcdfe6;
  height: 100%;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
</style>
